import React, { Component } from 'react';

import {CSSTransition} from 'react-transition-group'

import './transitionGroup.css'

class transitionGroup extends Component {
    constructor(props) {
        super(props);
        this.state = {
            status:true
        }
        this.status=false
        this.inORoutBind=this.inORout.bind(this)
    }
    componentDidMount(){
        console.log(CSSTransition);
    }
    inORout(){
        // 这里不能这么用
        // 这个status是绑定到CSSTransition组件上的，貌似不能更改，会报错
        let temp=this.state.status?false:true
        this.setState({
            status:temp
        })
        // this.status=!this.status
    }
    render() { 
        return (
            <div>
                <p>这是一个react-transition-group组件</p>
                <CSSTransition in={this.state.status} timeout={2000} classNames='item-body'>
                     <div className='test'>薛定谔的物体</div>
                </CSSTransition>
                <button onClick={this.inORoutBind}>点击</button>
            </div>
        );
    }
}
 
export default transitionGroup;